<ui:composition template="/WEB-INF/template/layoutPadrao.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

	<ui:define name="titulo">Novo Usuario</ui:define>
	<f:metadata>
		<f:event listener="#{cadastroUsuarioBean.inicializar}"
			type="preRenderView" />
		<f:viewParam name="usuario" value="#{cadastroUsuarioBean.usuario}"/>
	</f:metadata>

	<ui:define name="corpo">
		<h:form>
			<h1>Novo Usuario</h1>
			<p:messages autoUpdate="true" closable="true" />

			<p:toolbar style="margin-top:20px">
				<p:toolbarGroup>
					<p:button value="Novo" outcome="/usuarios/cadastroUsuario" />
					<p:commandButton value="Salvar" id="botaoSalvar"
						action="#{cadastroUsuarioBean.salvar}" update="@form" />
				</p:toolbarGroup>

				<p:toolbarGroup align="right">
					<p:button value="Pesquisa" outcome="/usuarios/pesquisaUsuario" />
				</p:toolbarGroup>
			</p:toolbar>

			<p:panelGrid columns="2" id="painel"
				style="width:100%; margin-top:20px" columnClasses="rotulo, campo">

				<p:outputLabel value="Nome" for="nome" />
				<p:inputText id="nome" size="60" maxlength="80"
					value="#{cadastroUsuarioBean.usuario.nome}" />

				<p:outputLabel value="Login" for="login" />
				<p:inputText id="login" size="60" maxlength="80"
					value="#{cadastroUsuarioBean.usuario.login}" />

				<p:outputLabel value="Senha" for="senha" />
				<p:password id="senha" value="#{cadastroUsuarioBean.usuario.senha}"
					feedback="true" weakLabel="Fraca" goodLabel="Boa"
					strongLabel="Forte" promptLabel="Informe uma senha" inline="true"
					match="confirmacaoSenha" />

				<p:outputLabel value="Confirme a senha" for="confirmacaoSenha" />
				<p:password id="confirmacaoSenha" required="true" />

			</p:panelGrid>

			<p:panelGrid columns="2" id="painelGrupo"
				style="width:100%; margin-top:20px" columnClasses="rotulo, campo">
				
				<p:selectOneMenu id="grupo" effect="fade" 
					value="#{cadastroUsuarioBean.grupoUsuarioSelecionado}">
					<f:selectItem itemLabel=":: Selecione ::" />
					<f:selectItems value="#{cadastroUsuarioBean.gruposListados}"
						var="grupo" itemLabel="#{grupo.nome}" itemValue="#{grupo}" />
				</p:selectOneMenu>

				<p:commandButton value="Adicionar Grupo"
					action="#{cadastroUsuarioBean.selecionarGrupo}" />
			</p:panelGrid>

			<p:dataTable id="gruposTable"
				value="#{cadastroUsuarioBean.gruposListados}" var="grupo"
				style="margin-top: 20px" emptyMessage="Nenhum grupo encontrado."
				rows="20" paginator="true" paginatorAlwaysVisible="false"
				paginatorPosition="bottom">

				<p:column headerText="Grupo" style="text-align: left">
					<h:outputText value="#{grupo.nome}" />
				</p:column>


				<p:column style="width: 100px; text-align: center">
					<p:column style="width: 100px; text-align: center">
					<p:button icon="ui-icon-pencil" title="Editar" outcome="/grupoUsuarios/cadastroGrupo">
						<f:param name="grupo" value="#{grupo.id}"/>
					</p:button>
					
				</p:column>
				</p:column>
			</p:dataTable>

		</h:form>
	</ui:define>
</ui:composition>